Microsoft Playwright Testing で Microsoft Entra ID 認証がデフォルト方式に変わったので旧方式のアクセストークン生成を行ってみた

#Microsoft Entra ID

#Microsoft Azure

いわさ

2024.10.08

いわさです。

以前 Microsot Playwright Testing という、クラウド上で Playwright テストをリモート実行出来るサービス（プレビュー中）を紹介させて頂きました。

ローカルの Playwright 環境からは、事前に発行されたアクセストークンを使ってサービスエンドポイントとの通信を行っていました。
こちらですが、先日のアップデートでアクセストークンのリスクを軽減するために Microsoft Entra ID を使った認証がデフォルトとなりました。

おっ、今までの方法だとまずいか？と思って確認してみたところ、旧来のアクセストークン発行方式もオプションで使うことが出来るようになっていました。
この記事では、有効化と発行までの流れを紹介します。

冒頭の記事で以前もオンボーディング設定しているのですが、前回はアクセストークンを生成していました。
現在の最新版のガイドページではデフォルトではaz loginをするような流れになっています。

試しにオンボーディングしてみます。

% npm init @azure/microsoft-playwright-testing
> hoge1008playwright@1.0.0 npx
> init
Installing Service package (npm install --save-dev @azure/microsoft-playwright-testing)
Success! Created service configuration file - playwright.service.config.ts
To run playwrights tests using Playwright Service
        npx playwright test -c playwright.service.config.ts --workers=20
Playwright Service Portal - https://playwright.microsoft.com/
Getting Started - https://aka.ms/mpt/quickstart
If you're already using the Microsoft Playwright Testing service, please review the quickstart guide [https://aka.ms/mpt/quickstart] to ensure your tests continue running smoothly.
We've introduced changes related to authentication. You'll need to update the new config file to align with these changes.

% az login
A web browser has been opened at https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize. Please continue the login in the web browser. If no web browser is available or if the web browser fails to open, use device code flow with `az login --use-device-code`.
[
  {
    "cloudName": "AzureCloud",
:

  }
]

% export PLAYWRIGHT_SERVICE_URL=wss://eastus.api.playwright.microsoft.com/accounts/eastus_419709c9-2a54-44ce-8370-927f37ff236e/browsers

% npx playwright test -c playwright.service.config.ts
Running tests using Microsoft Playwright Testing service.
Running 6 tests using 5 workers
     1 [chromium] › example.spec.ts:10:5 › get started link
     2 [firefox] › example.spec.ts:3:5 › has title
  ✓  1 [chromium] › example.spec.ts:10:5 › get started link (2.9s)
  ✓  2 [firefox] › example.spec.ts:3:5 › has title (3.9s)
  ✓  3 [chromium] › example.spec.ts:3:5 › has title (1.8s)
  ✓  4 [firefox] › example.spec.ts:10:5 › get started link (3.8s)
  ✓  5 [webkit] › example.spec.ts:3:5 › has title (1.9s)
  ✓  6 [webkit] › example.spec.ts:10:5 › get started link (2.1s)
  6 passed (11.5s)
[========================================] 100%
Test report: https://playwright.microsoft.com/workspaces/eastus_419709c9-2a54-44ce-8370-927f37ff236e/runs/58b59cff-f041-4a61-b6db-af7a671c6393

リモートテスト実行まで出来ました。
現在のデフォルトはこの流れです。

旧来のアクセストークンを発行する流れ

では静的なアクセストークンを発行して使い回す必要のある環境の場合はどうするのが良いでしょうか。
実は今回のアップデート後も旧来のアクセストークン発行は可能です。

設定画面を開きましょう。

設定の Authentication メニューで認証設定をカスタマイズ出来ます。
デフォルトが Microsoft Entra ID である点は変更出来ません。オプションでアクセストークンを使えるように有効化出来ます。

注意書きを呼んだ上で有効化しましょう。具体的にはアクセストークンを発行して終わりではなく、発行したトークンをしっかり管理したり、あるいは適切なセキュリティ対策を検討します。
トークンをコードベースには直接含めないようにするとか定期的にトークンをローテーションし、不要になったトークンはすぐに無効化することなどは必要です。